<script>
import DeviceApi from '@/api/device'

export default {
  name: 'DeviceFeedbackForm',
  props: {
    deviceId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      rating: 0,
      feedback: ''
    }
  },
  computed: {
    isValid() {
      return this.rating > 0 && this.feedback.trim().length > 0
    }
  },
  methods: {
    async submitFeedback() {
      if (!this.isValid) return

      try {
        const api = new DeviceApi()
        const res = await api.addDeviceFeedback(this.deviceId, {
          rating: this.rating,
          feedback: this.feedback
        })

        if (res.code === 200) {
          this.$myMessageBox('评价成功')
          this.$emit('feedback-submitted')
          this.resetForm()
        } else {
          this.$myMessageBox(res.msg || '评价失败')
        }
      } catch (err) {
        console.error('Error submitting feedback:', err)
        this.$myMessageBox('评价失败，请稍后重试')
      }
    },
    resetForm() {
      this.rating = 0
      this.feedback = ''
    }
  }
}
</script>


<template>
  <div class="feedback-form">
    <h3>发表评价</h3>
    <div class="rating-section">
      <label>评分：</label>
      <div class="rating-stars">
        <span 
          v-for="star in 5" 
          :key="star"
          :class="['star', { active: star <= rating }]"
          @click="rating = star"
        >★</span>
      </div>
    </div>
    <div class="feedback-section">
      <label>评价内容：</label>
      <textarea 
        v-model="feedback"
        placeholder="请输入您的评价内容..."
        rows="4"
      ></textarea>
    </div>
    <div class="form-actions">
      <button 
        class="btn-submit" 
        @click="submitFeedback"
        :disabled="!isValid"
      >
        提交评价
      </button>
    </div>
  </div>
</template>



<style scoped>
.feedback-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.feedback-form h3 {
  margin: 0 0 20px;
  color: #2c3e50;
}

.rating-section {
  margin-bottom: 20px;
}

.rating-stars {
  display: inline-block;
  margin-left: 10px;
}

.star {
  font-size: 24px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.3s;
}

.star.active {
  color: #ffd700;
}

.feedback-section {
  margin-bottom: 20px;
}

.feedback-section label {
  display: block;
  margin-bottom: 8px;
  color: #666;
}

textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-submit {
  padding: 8px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-submit:hover:not(:disabled) {
  background: #0056b3;
}
</style> 